{% extends "../main.html" %}

{% block head %}
<script src="/javascript/jquery.elastic.js" type="text/javascript"></script>
<script src="/javascript/jquery.placeholder.min.js" type="text/javascript"></script>
{% endblock %}

{% block breadcrumb %}
{% ifequal post_url "/reception" %}
<nav>
    <ul id="crumbs">
        <li><a href="/">{{ system_title }}</a></li>
        <li><a href="/reception">{{ str.reception }}</a></li>
        <li>{{ person.displayname }}</li>
    </ul>
</nav>
{% endifequal %}
{% endblock %}

{% block content %}

<section id="wide_content">
    {% if system_logo %}
    <img src="{{ system_logo }}" alt="logo" style="margin:20px auto; display:block;" />
    {% endif %}

    <h1 style="margin-top:30px; text-align:center; color:black;">{{ str.application }}</h1>
    {% ifequal application_status "submitted" %}
    <h1 style="margin-top:30px; text-align:center; color:#00AFF0; font-weight:bold;">{{ str.application_status_submitted }}</h1>
    {% endifequal %}
    {% ifequal application_status "accepted" %}
    <h1 style="margin-top:30px; text-align:center; color:green; font-weight:bold;">{{ str.application_status_accepted }}</h1>
    {% endifequal %}

    {% include "receptions.html" %}
    {% include "person.html" %}
    {% include "cv_secondaryschools.html" %}
    {% include "cv_highschools.html" %}
    {% include "cv_workplaces.html" %}
    {% include "documents.html" %}
    {% include "conversation.html" %}

    <div id="application_completed_info" style="clear:both; margin-top:50px; display:block; text-align:center; font-weight:bold; color:green;">
        {{ application_completed_info }}
    </div>

</section>

<script>
    $(document).ready(function(){
        $("input").placeholder({css_class: "placeholder"});
        $('textarea').elastic();
        $('#top_nav').hide();

        $("#confirm_application").click(function(){
            location.href = '{{ post_url }}/submit';
        });
    });

    function autoSave(input, url, data) {
        if(!data['key']) data['key'] = input.attr('alt');
        if(!data['field']) data['field'] = input.attr('name');
        if(!data['value']) data['value'] = input.val();
        data['person'] = '{{ person.key }}';

        $.post(url, data, function(json) {
            input.effect("highlight", {}, 1000);
            input.attr('alt', json['key']);
            $('#application_completed_info').html(json['application_completed_info']);
        }, "json");
    }
</script>

{% endblock %}